<template>
  <div class="left-menu" v-if="menuList">
    <TitleMenu class="top">
      <template v-slot:title>导航菜单</template>
      <template v-slot:icon>⚒</template>
    </TitleMenu>
    <TitleMenu v-for="(item,i) in menuList" :is-active="curActive === item.name" @active="click(item.name,i)"
               :key="item.id" :child-menu="item.child" @clickMenu="handlerClick">
      <template v-slot:title>{{ item.name }}</template>
      <template v-slot:icon>
        <div ref="menu">⇨</div>
      </template>
    </TitleMenu>
  </div>
</template>

<script>
import TitleMenu from "./TitleMenu";

export default {
  name: "MenuList",
  props: {
    menuList: {},
  },
  components: {
    TitleMenu,
  },
  data() {
    return {
      curActive: '',
      select: false,
    }
  },

  methods: {
    click(item, i) {
      this.curActive = item;
      var icon = this.$refs.menu[i];
      if (icon.innerHTML == '⇨') {
        icon.innerHTML = '⇩';
      } else {
        icon.innerHTML = '⇨';
        this.curActive = '';
      }
      // this.$emit('select', item);
    },
    handlerClick(item, i) {
      this.$emit('clickMenu', item, i);
    }
  }
}
</script>

<style scoped>

.left-menu {
  width: 100%;
  border: 1px solid;
  border-radius: 10px;
  overflow: hidden; /*对溢出部分的处理：隐藏*/
}

.top {
  font-weight: bolder;
  height: 50px;
  background-color: #e7e7e7;
}
</style>